<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      border: 1px solid #000;
    }

    #contentDiv{
      width: 800px;
      height: 300px;
      margin: auto;
    }

    #textDiv{
      width: 200px;
      height: 200px;
      /*overflow: hidden;//超出部分隐藏*/
      /*overflow-y: scroll; 超出部分以滚动条显示*/
      overflow-y: auto;/*当内容没有超出容器，则不出现滚动条，如果内容超出容器，以滚动条显示超出内容*/
      text-align: right;/*left、center、right*/
      /*background-color: yellow;*/
      background-color: rgba(255,28,68,0.3);
    }

    #infoSpan{
      font-size: 20px;
      font-family: '楷体';
      letter-spacing: 10px;
    }
    #span1{
      font-weight: bold;
    }
    #span2{
      font-weight: bolder;
    }
    #span3{
      font-weight: lighter;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="contentDiv"></div>
  <div id="textDiv">
    <p>北国风光</p>
    <p>千里冰封</p>
    <p>万里雪飘</p>
    <p>看长城内外</p>
    <p>大河上下</p>
    <p>顿失滔滔</p>
    <p>一代天矫</p>
    <p>成吉思汗</p>
  </div>
  <span id="infoSpan">这是毛泽东毛主席的〈沁园春.雪〉</span><br>
  <span>西游记</span><br>
  <span id="span1">三国演义</span><br>
  <span id="span2">红楼梦</span><br>
  <span id="span3">水浒传</span><br>

  <a href="../css1.html" style="text-decoration-line: none">跳转页面</a>
  <span style="text-decoration-line: underline">重点文字</span>
  <span>￥5.00</span><span style="text-decoration-line: line-through">￥8.00</span>
  <br>
  <span style="visibility: hidden">床前明月光</span><span>疑是地上霜</span><br>
  <span style="display: none">举头望明月</span><span>低头思故乡</span>
</body>
</html>
